<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Gauges</title>
    <link rel="stylesheet" type="text/css" href="css/layout-default-latest.css" />
    <link rel="stylesheet" type="text/css" href="css/start/jquery-ui-1.9.0.custom.min.css" />
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/gauge.js"></script>
    <script>
        var gaugesObject = new Object(); // or just {}
        var xml_source;

        //utility
        function include(arr, obj) {
            for(var i=0; i<arr.length; i++) {
                if (arr[i] == obj) return true;
            }
        }

        function addKPI(code, title, url)
        {
            window.top.addKPIFromChild(code, title, url);
        }


        function drawGauges()
        {
            $(xml_source).find('rpt_targets').each(function(){
                /*
                 <rpt_targets REPORT_ID="C-01" REPORT_LABEL="Rework"
                 BAD_MIN="4.0 " BAD_MAX="10.0 "
                 WARN_MIN="2.0 " WARN_MAX="3.0 "
                 GOOD_MIN="0.0 " GOOD_MAX="1.0 "/>
                 */

                var code = $(this).attr('REPORT_ID');
                var kpi = decodeURIComponent($(this).attr('REPORT_LABEL'));
                var bad_min = $(this).attr('BAD_MIN');
                var bad_max = $(this).attr('BAD_MAX');

                var warn_min = $(this).attr('WARN_MIN');
                var warn_max = $(this).attr('WARN_MAX');

                var good_min = $(this).attr('GOOD_MIN');
                var good_max = $(this).attr('GOOD_MAX');
                var gaugeTemplate =
                        "<div id='ctr_" + code + "' style='float: left; width: 210px; height: 230px;'>" +
                            "<div style='float: left; text-align: center;'>" +
                                '<canvas id="'+ code +'" style="width: 200px; height: 200px;"></canvas>' +
                                '<div><a href="#" report_id="' + code + '">'+kpi+'</a></div>' +
                            '</div>' +
                        '</div>';

                $('#gauges').append(gaugeTemplate);

                gaugesObject[code] = generateGauge(code, bad_min, bad_max, warn_min, warn_max, good_min, good_max);
                gaugesObject[code].setValue(100);
            });

            $('div a').click(function() {
                addKPI($(this).attr('report_id'), $(this).html());
            }) ;
        }
        function setGaugesValues(val, kpis)
        {
            var query = 'plant[id="' + val + '"]';
            $(xml_source).find(query).each(function(){
                /*
                 ("node[name='x']");
                 <plant id="A004" name="A004">
                     <kpi id="C-01" label="Rework">0.00 </kpi>
                     <kpi id="C-02" label="Mean%20Time%20Between%20Failure">0.00 </kpi>
                 </plant>
                 */
                $(this).find('kpi').each(function() {
                    var code = $(this).attr('id');
                    var gaugeValue = $(this).text();

                    if(include(kpis, code))
                    {
                        $('#ctr_' + code).css('display', 'block');
                    }
                    else
                    {
                        $('#ctr_' + code).css('display', 'none');
                    }

                    //alert(code + ", " + gaugeValue);
                    //alert("-" + gaugeValue + "-");
                    gaugesObject[code].setValue(parseFloat(gaugeValue.trim()));
                    //gaugesObject[code].setValue(gaugeValue.trim());
                })
            })
        }

        $(document).ready(function () {

            $.ajax({
                type: "GET",
                url: "data/get_compare_data.xml",
                dataType: "xml",
                success: function(xml) {
                    xml_source = xml;
                    drawGauges();
                }
            });
        });



        function max(limits)
        {
            var value = parseFloat(limits[0]);
            for(var i = 1; i < limits.length; i++)
            {
                if(value < parseFloat(limits[i]))
                    value = parseFloat(limits[i]);
            }

            return value;
        }

        function min(limits)
        {
            var value = parseFloat(limits[0]);
            for(var i = 1; i < limits.length; i++)
            {
                if(value > parseFloat(limits[i]))
                    value = parseFloat(limits[i]);
            }

            return value;
        }
        function refresh()
        {
            var plant = window.top.getPlantFromChild().split(":");
            var kpis = parent.getSelectedKPIsFromChild();
            setGaugesValues(plant[0], kpis);
            $('#selectedPlants').html(plant[1]);
        }

        function generateGauge(container, bad_min, bad_max, warn_min, warn_max, good_min, good_max)
        {
            var limits=new Array(bad_min, bad_max, warn_min, warn_max, good_min, good_max);
            var myMin = min(limits);
            var myMax = max(limits);



            var gauge = new Gauge({
                renderTo    : container,
                width       : 400,
                height      : 400,
                glow        : true,
                units       : 'Km/h',
                title       : false,
                minValue    : myMin,
                maxValue    : myMax,
                majorTicks  : [myMin, Math.round(myMax/5*100)/100, Math.round(myMax/5*2*100)/100,Math.round(myMax/5*3*100)/100,Math.round(myMax/5*4*100)/100,myMax],
                minorTicks  : 10,
                strokeTicks : false,
                highlights  : [
                    { from : good_min,   to : good_max, color : 'rgba(0,   255, 0, .8)' },
                    { from : warn_min, to : warn_max, color : 'rgba(255, 255, 0, .8)' },
                    { from : bad_min, to : bad_max, color : 'rgba(255, 30,  0, .8)' }
                ],
                colors      : {
                    plate      : '#000',
                    majorTicks : '#f5f5f5',
                    minorTicks : '#ddd',
                    title      : '#fff',
                    units      : '#ccc',
                    numbers    : '#eee',
                    needle     : { start : 'rgba(240, 128, 128, 1)', end : 'rgba(255, 160, 122, .9)' }
                }
            });

            gauge.onready = function() {
                //gauge.setValue( Math.random() * 220);
            };

            gauge.draw();
            return gauge;
        }
    </script>
</head>
<body>
    <div style="margin-top: 10px; padding: 0 .7em;" class="ui-state-highlight ui-corner-all">
        <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-info"></span>
            <strong>Selected Plant:</strong> <span id="selectedPlants"> Bla bla bla bla </span></p>
    </div>
    <br />
    <div id="gauges">
    </div>


</body>

</html>
